<!-- Add "scoped" attribute to limit CSS to this component only -->
<template>
    <div class="all product-list clearfix">
      <swiper :list="bannerList" auto class="banner" height="aspect-ratio" loop :aspect-ratio="562/750"></swiper>

        
        <div class="box1-1" style="margin-top:.1rem;">
          <group-title class="title">综合业务</group-title>
          <div  class="wrapper">
              <ul>
                  <li v-for="(item,i) in indexTitle" :key="i" @click="toDetail(item)" class="list">
                    <img :src="item.u1"  class="indecIcon" onerror="function(e){ alert('no') }"/>
                    <span class="listText">{{item.t1}}</span>
                  </li>
              </ul>
          </div>
        </div>

        
        <div class="box1-1">
          <group-title class="title">固网业务</group-title>
          <div  class="wrapper">
              <ul>
                  <li v-for="(item,i) in indexTitle2" :key="i" @click="toDetail(item)">
                    <img :src="item.u2"  class="indecIcon"/>
                    <p class="listText">{{item.t2}}</p>
                  </li>
              </ul>
          </div>
        </div>

        
        <div class="box1-1">
          <group-title class="title">移网业务</group-title>
          <div  class="wrapper">
              <ul>
                  <li v-for="(item,i) in indexTitle3" :key="i" @click="toDetail(item)">
                    <img :src="item.u3"  class="indecIcon"/>
                    <p class="listText">{{item.t3}}</p>
                  </li>
              </ul>
          </div>
        </div>
        
        
      </div>   
</template>

<script>
var myScroll;
  import { Swiper,Group,GroupTitle, Grid, GridItem, Panel,XButton,Marquee, MarqueeItem,Scroller  } from 'vux'
  export default {
    data() {
      return {
        bannerList:[{
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner4.jpg',
            }, {
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner1.jpg',
            },{
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner3.jpg',
            }],
        bannerIndex:0,
        indexTitle:[],
        indexTitle2:[],
        indexTitle3:[]
      }
    },
    mounted(){
      this.indexTitle=this.$blocks.filter(x=>x.t1);
      this.indexTitle2=this.$blocks.filter(x=>x.t2);
      this.indexTitle3=this.$blocks.filter(x=>x.t3);

      // myScroll = new IScroll('.wrapper');
    },
    methods: {
      jump(name){
        this.$router.push({name})
      },
      toList(list){
        console.log("显示内容",this);
        console.log("查看router方法",this.$router.push);
        console.log("显示当前点击获取的数据",list)
        this.$router.push({name:'test',params:list})
      },
      toDetail(item){
        // if(item.name=="冰激凌套餐"){
        //   this.$vux.toast.text('资费正在调整中，敬请期待','middle')
        //   return;
        // }
        this.$router.push({name:'Detail',params:{id:item.id}})
      }
    },
    components: {
      Swiper,
      GroupTitle,
      Grid, GridItem,
      Panel,
      XButton,
      Marquee, MarqueeItem,Group,GroupTitle,Scroller
    }
  }
</script>

<style lang="less" scoped>
  html,body{
    width:100%;
    max-width: 100% !important;
    height:100%;
    margin:0;
    padding:0;
  }
  .all{
    width:100%;
    height:100%;
  }
  .banner{
    width:100%;
  }
 .weui-cells__title{
    margin:0px;
    padding:0px;
  }
  .title{
    color:#666;
    font-weight: bold;
    display: inline-block;
    font-size:.4rem;
    padding-left:.3rem;
  }
  .listText{
    color:#333;
    font-size:.3rem;
    text-align: center;
    margin:0px;
  }
  .weui-grids:before{
    border:0px;
  }
  .weui-grid:after{
    border:0px;
  }
  .weui-grid {
    padding:5px 0px;
    width:25%;
  }
  .box1 {
  height: 100px;
  position: relative;
  width: 600px;
  }
.box1-item {
  width: 13.5%;
  height: 100px;
  background-color: #fff;
  display:inline-block;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box1-item[data-v-8a3dcea4]{
  line-height: normal;
}
.vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-img{
  background-size: contain !important;
}
.box1-1 {
	width:100%;
  height:3rem;
  margin-top:.1rem;
  // background:red;
  .wrapper{
    width:100%;
    height:2.5rem;
    position:relative;
    ul{
      width:100%;
      display:-webkit-box;
      list-style:none;
      text-align: center;
      height:2.5rem;
      position: absolute;
      line-height:.35rem;
      li{
        width:2.5rem;
        height:2.5rem;
        span{
          display:block;
          font-size:.35rem
        }
        img{
          width:1.8rem;
          height:1.8rem;
        }
      }
    }
  }
}

.wrapper ul{
    overflow-y: hidden;
}
</style>